<template>
  <div class="user-info-outer-outer">
    <div class="user-info-outer">
      <div class="user-info">
        <div class="user-info-title-outer">
          Account Information
        </div>
        <div class="user-info-description-outer">
          You can make updates to your account information at any time by clicking “Edit” next to the information you'd like to review or change. Make sure to click “Save” after making an update!
        </div>

          <a-spin :spinning="pageState.isRefreshing||userInfo==null" style="width: 100%" size="large">
            <div class="user-info-item-outer" v-if="userInfo!=null">
              <div class="user-info-item" v-for="item in userInfoTypeList" >
                <div v-if="!(!item.editable&&pageState.state)">
                  <div class="user-info-item-title-outer" >
                    {{item.label}}
                    <!--                  <div class="user-info-item-to-edit-outer">-->
                    <!--                    <div class="user-info-item-to-edit-content">-->
                    <!--                      Edit-->
                    <!--                    </div>-->

                    <!--                    <svg focusable="false" viewBox="2 2 24 24" class="user-info-item-to-edit-icon" aria-hidden="true"><path d="M22.36 17.73L8.74 4.11a.5.5 0 00-.71 0L4.11 8a.48.48 0 000 .7L6.39 11a.56.56 0 00.05.08l.09.06 11.2 11.21a.54.54 0 00.36.14H22a.5.5 0 00.5-.5v-3.91a.51.51 0 00-.14-.35zM8.38 5.17L10 6.8 6.81 10 5.17 8.38zM21.51 21.5h-3.22L7.52 10.73l3.2-3.22 10.79 10.78z"></path></svg>-->

                    <!--                  </div>-->
                  </div>
                  <div class="user-info-item-info-outer">
                    <div v-if="!item.editable">{{userInfo[item.index]}}</div>
                    <div v-else-if="!pageState.state">
                       {{userInfo[item.index]}}
                    </div>
                    <div v-else>
                      <basic-input :type="item.type" size="normal" v-model="pageState.updateInfo[item.index]"></basic-input>
                    </div>
                  </div>
                </div>
              </div>

<!--/*              <div class="user-info-item">*/-->
<!--/*                <div class="user-info-item-title-outer">*/-->
<!--/*                  Account Name*/-->
<!--/*                  <div class="user-info-item-to-edit-outer">*/-->
<!--/*                    <div class="user-info-item-to-edit-content">*/-->
<!--/*                      Edit*/-->
<!--                    </div>-->

<!--                    <svg focusable="false" viewBox="2 2 24 24" class="user-info-item-to-edit-icon" aria-hidden="true"><path d="M22.36 17.73L8.74 4.11a.5.5 0 00-.71 0L4.11 8a.48.48 0 000 .7L6.39 11a.56.56 0 00.05.08l.09.06 11.2 11.21a.54.54 0 00.36.14H22a.5.5 0 00.5-.5v-3.91a.51.51 0 00-.14-.35zM8.38 5.17L10 6.8 6.81 10 5.17 8.38zM21.51 21.5h-3.22L7.52 10.73l3.2-3.22 10.79 10.78z"></path></svg>-->

<!--                  </div>-->
<!--                </div>-->
<!--                <div class="user-info-item-info-outer">-->
<!--                  Z YL-->
<!--                </div>-->
<!--              </div>-->
            </div>
            <div v-else style="width: 100%;height: 200px;">

            </div>
            <div v-if="!pageState.state" style="margin-top: 20px">
              <basic-button @click="preToEdit" style="box-sizing: border-box;width: 100%" :inverse-color="true">
                <div style="text-align: center;font-size: 18px;">
                  Edit
                </div>
              </basic-button>
            </div>
            <div v-else>
              <div style="margin-top: 20px">
                <basic-button @click="toSubmit" style="box-sizing: border-box;width: 100%" :inverse-color="true">
                  <div style="text-align: center;font-size: 18px;">
                    Submit
                  </div>
                </basic-button>
              </div>
              <div style="margin-top: 10px">
                <basic-button @click="cancelEdit" style="box-sizing: border-box;width: 100%;border: 1px solid #1677ff;" >
                  <div style="text-align: center;font-size: 18px;">
                    Cancel
                  </div>
                </basic-button>
              </div>
            </div>
          </a-spin>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, reactive, computed, watch, onMounted} from 'vue'
import {Modal, notification} from "ant-design-vue";
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import BasicInput from "../../components/input/basicInput.vue";
import BasicButton from '../../components/button/basicButton.vue';
import {updateUserById} from "../../api/UserRequest";
import {getUserInfo} from "../../api/UserActionRequest";
import store from "../../store";

interface UserInfoTypeType{
  label:string,
  index:string,
  type:
      |'number'
      |'text'
  editable?:boolean
}

export default defineComponent({
  components: {BasicInput,BasicButton},
  setup(props, context) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const userInfo=computed(()=>{
      return store.state.globalInfo.userInfo
    });
    const pageState=reactive({
      updateInfo:null,
      state:false,
      isRefreshing:false
    })

    const preToEdit=()=>{
      pageState.updateInfo=JSON.parse(JSON.stringify(userInfo.value));
      pageState.state=true;
    }

    const cancelEdit=()=>{
      pageState.state=false;
      pageState.updateInfo=null;
    }

    const toSubmit=()=>{
      Modal.confirm({
        title:'Are you sure to submit',
        onOk(){
          let info=JSON.parse(JSON.stringify(pageState.updateInfo));
          delete info.id;
          delete info.createAt;
          delete info.updateAt;
          delete info.mail;
          pageState.isRefreshing=true;
          updateUserById(info).then(async (res)=>{
            if(res.data.status==200){
              notification.success({
                message:'Modified successfully'
              })
              await getUserInfo().then((res) => {
                store.commit('SET_GLOBAL_INFO', {
                  userInfo: res.data.result
                })
              }).then(()=>{
                cancelEdit();
              })
            }else{
              notification.error({
                message: res.data.message||''
              })
            }
          }).finally(()=>{
            pageState.isRefreshing=false;
          })
        }
      })
    }

    const userInfoTypeList:UserInfoTypeType[]=[
      {
        label:'Surname',
        index:'familyName',
        type:'text',
        editable:true
      },
      {
        label:'First Name',
        index:'username',
        type:'text',
        editable:true
      },
      {
        label:'Phone',
        index:'phone',
        type:'number',
        editable:true
      },
      {
        label:'createAt',
        index:'createAt',
        type:'text',
        editable:false
      },
      {
        label:'updateAt',
        index:'updateAt',
        type:'text',
        editable:false
      },
    ]

    //TODO 用户信息
    return {
      userInfoTypeList,
      pageState,
      userInfo,
      preToEdit,
      cancelEdit,
      toSubmit
    }
  }
})
</script>

<style scoped lang="less">
.user-info-outer-outer{
  padding:20px;
  @media screen and(max-width: 768px){
    padding: 15px;
  }
  @media screen and(max-width: 576px){
    padding: 10px;
  }
  @media screen and(max-width: 425px){
    padding: 5px;
  }
  .user-info-outer{
    background-color: #f5f5f5;
    border-radius: 16px;
    padding: 20px 40px;

    @media screen and(max-width: 768px){
      padding: 15px;
    }

    @media screen and(max-width: 576px){
      padding: 10px;
    }
    display: flex;
    .user-info{
      flex: 0 0 50%;

      @media screen and(max-width: 768px){
        flex: 0 0 100%;
      }

      .user-info-title-outer{
        line-height: 2;
        font-weight: bold;
        font-size: 30px;
        @media screen and(max-width: 768px){
          font-size: 25px;
        }
      }
      .user-info-description-outer{
        word-break: break-word;
        line-height: 1.5;
        @media screen and(max-width: 576px){
          font-size: 14px;
        }
        margin-bottom: 30px;
      }
      .user-info-item-outer{

        .user-info-item:last-child{
          margin-bottom: 0;
        }

        .user-info-item{

          margin-bottom: 10px;

          .user-info-item-title-outer{
            line-height: 2;
            font-weight: bold;
            font-size: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .user-info-item-to-edit-outer{
              font-size: 16px;
              font-weight: normal;
              display: flex;
              flex-direction: row-reverse;
              flex: 1 1 auto;
              align-items: center;
              .user-info-item-to-edit-content{

              }
              .user-info-item-to-edit-icon{
                width: 24px;
                height: 24px;
              }
            }
          }
          .user-info-item-info-outer{

          }
        }

      }
    }
  }
}


</style>
